<template>
	<div>
		<el-container>
			<el-header>
				<h4>准备付款</h4>
			</el-header>
		</el-container>
		<p>
			<el-button>订单号</el-button>
			<el-input v-model="form.ordid" readonly></el-input>
		</p>
		<p>
			<el-button>收货地址</el-button>
			<el-input v-model="form.addr" readonly></el-input>
		</p>
		<p>
			<el-button>联系方式</el-button>
			<el-input v-model="form.phone" readonly></el-input>
		</p>
		<p>
			<el-button>付款状态</el-button>
			<el-button type="danger" v-if="show==1" @click="pay()">未付款，点击这里扫码付款</el-button>
			<el-button type="success" v-if="show==2">已付款</el-button>
			
		</p>
		<el-dialog v-model="show1" width="500px" title="立即支付" center>
			<div class="paybox">
				<img src="../../../../public/weixinpay.jpg" alt="">
				<img src="../../../../public/zhifubaopay.jpg" alt="">
			</div>
			<span class="dialog-footer" style="display: block; text-align: center;margin-top: 15px;">
				<el-button @click="show1 = false">取消付款</el-button>
				<el-button type="primary" @click="gopay()">确认付款</el-button>
			</span>
		</el-dialog>
		<el-container>
			<el-table :data="list">
				<el-table-column prop="" label="图片">
					<template #default="scope">
						<img :src="`${$Imgurl}/showImg/${scope.row.picture}`">
					</template>
				</el-table-column>
				<el-table-column prop="name" label="商品名称"></el-table-column>
				<el-table-column prop="price" label="商品价钱"></el-table-column>
				<el-table-column prop="num" label="商品数量"></el-table-column>
				<el-table-column prop="" label="商品总价">
					<template #default="scope">
						{{scope.row.num*scope.row.price}}
					</template>
				</el-table-column>
			</el-table>
		</el-container>
	</div>
	
</template>

<script>
	import instance from '../../../ajax/index.js'
	export default{
		name:'Paymenu',
		data(){
			return{
				list:[],
				show:1,
				show1:false,
				form:{
					ordid:'',
					addr:'',
					phone:''
				},
			}
		},
		methods:{
			pay(){
				this.show1=true
			},
			gopay(){
				this.show1=false
				let obj={}
				obj.ordid=this.form.ordid
				obj.ispay=1
				instance.post('/api/fore/ord/addPay',obj).then( (res)=>{
					this.show=2
				} ).catch( (error)=>{
					console.log(error);
				} )
			}
		},
		mounted() {
			this.list=this.$store.state.menus
			this.form.ordid=this.$route.query.ordid
			this.form.addr=this.$route.query.addr
			this.form.phone=this.$route.query.phone
		}
	}
</script>

<style scoped>
	.el-header {
		margin-top: 56px;
		font-weight: bold;
		font-size: 20px;
		line-height: 60px;
	}
	img{
		height: 100px;
	}
	.paybox img{
		height: 200px;
		margin-left: 15px;
	}
	.el-input{
		width: 500px;
	}
	.el-button{
		margin-right: 15px;
		margin-top: 10px;
	}
</style>
